<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-card class="card-image" :style="`background-image: url('/images/幻灯片4.png');`" shadow="hover">
				</el-card>
			</el-col>
		</el-row>
		<div style="height: 20px;"></div>
		<el-row>
			<el-col :span="24">
				<el-card style="height: 100%;" shadow="hover">
					<template #header>
						<el-text size="large">快捷方式</el-text>
					</template>
					<el-row :gutter="20">
						<VueDraggable ref="el" v-model="shortcutList" :animation="500" class="flex" style="width: 100%;"
							@start="onStart" @End="onEnd">
							<el-col @click="openDialog(item)" class="my-col-item" :title="item.text"
								v-for="(item,key) in shortcutList" :key="item.id" :span="6">
								<el-button class="my-btn-max" :class="{maving:mavingIndex===key}"
									:type="item?.type || 'primary'" :icon="item.icon">{{item.text}}</el-button>
							</el-col>
						</VueDraggable>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="6">
				<el-card style="height: 384px;" shadow="hover">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text size="large">
									待办事项
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<List :list="todosList"></List>
				</el-card>
			</el-col>
			<el-col :span="18">
				<el-card style="height: 384px;" shadow="hover" body-style="padding: 0;">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-checkbox style="height: auto;" v-model="checked1" size="default" label="待审批出入库" />
							</div>
							<div class="right">
								<el-popover placement="bottom" :width="200" trigger="click">
									<template #reference>
										<el-button title="筛选" class="my-a"
											style="border: 1px solid #4db0e4;padding: 4px 6px;">
											<el-image style="width: 18px;height: 18px;"
												src="/images/svg/筛选.svg"></el-image>
										</el-button>
									</template>
									<!--  -->
								</el-popover>

								<Tab :list="tabList"></Tab>
								<el-divider direction="vertical" />
								<!--  -->
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<el-scrollbar style="height: 336px;">
						<div>
							<div v-for="(item,key) in reviewedList" :key="key"
								class="flex-space-between active px-20 py-10 b-b">
								<div class="left" style="flex: 1;">
									<el-text>
										{{item.id}}
									</el-text>
									<el-avatar style="margin: 0 5px 0 10px;">{{item.image}}</el-avatar>
									<div>
										<div>
											<el-text>
												{{item.title}}
											</el-text>
											<el-tooltip effect="light" content="任务分配于 2024-06-03 15:47" placement="top">
												<el-text type="info"
													style="margin-left: 5px;font-size: 12px;cursor: pointer;">
													{{item.time}}
												</el-text>
											</el-tooltip>
										</div>
										<div>
											<el-text>
												<el-link href="" type="info">
													<el-text type="info" style="font-size: 12px;">{{item.sub}}</el-text>
													<el-divider direction="vertical" />
													<el-text type="info"
														style="font-size: 12px;">{{item.user}}</el-text>
												</el-link>
											</el-text>
										</div>
									</div>
								</div>
								<div class="right" style="justify-content: space-between;flex: 1;">
									<div>
										<div>
											<el-text>{{item.node}}</el-text>
										</div>
										<div>
											<el-text type="warning">{{item.isnode}}</el-text>
										</div>
									</div>
									<div>
										<el-button plain>
											办理
											<el-icon>
												<ArrowDown />
											</el-icon>
										</el-button>
										<el-tooltip effect="light" content="查看执行记录" placement="top"><el-button
												:icon="Tickets" plain />
										</el-tooltip>
									</div>
								</div>
							</div>
						</div>
					</el-scrollbar>
				</el-card>
			</el-col>
		</el-row>
		<div style="height: 20px;"></div>
		<el-card style="height: 384px;" shadow="hover" class="my">
			<template #header>
				<div class="flex-space-between">
					<div class="left">
						<el-text size="large">
							待发货 日程
						</el-text>
					</div>
					<div class="right">
						<el-tooltip placement="top" effect="light" content="更多">
							<div class="my-a">
								<el-icon color="#676967">
									<MoreFilled />
								</el-icon>
							</div>
						</el-tooltip>
					</div>
				</div>
			</template>
			<!--  -->
			<el-row>
				<el-col :span="13">
					<el-calendar ref="calendar">
						<template #header="{ date }">
							<div class="left">
								<el-button text type="info">
									<el-text style="margin-right: 5px;">
										{{date}}
									</el-text>
								</el-button>
							</div>
							<div class="right">
								<el-button style="margin: auto;" text type="info" @click="selectDate('prev-month')">
									<el-icon>
										<ArrowLeft />
									</el-icon>
								</el-button>
								<el-button style="margin: auto;" text type="info" @click="selectDate('today')">
									<el-text>今天</el-text>
								</el-button>
								<el-button style="margin: auto;" text type="info" @click="selectDate('next-month')">
									<el-icon>
										<ArrowRight />
									</el-icon>
								</el-button>
							</div>
						</template>
					</el-calendar>
				</el-col>
				<el-col :span="11">
					<el-empty description="暂无数据" :image-size="100" />
				</el-col>
			</el-row>
		</el-card>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-card shadow="hover" style="height: auto;" class="my">
			<template #header>
				<div class="flex-space-between">
					<div class="left">
						<el-text size="large">
							出库流水
						</el-text>
					</div>
					<div class="right">
						<el-tooltip placement="top" effect="light" content="更多">
							<div class="my-a">
								<el-icon color="#676967">
									<MoreFilled />
								</el-icon>
							</div>
						</el-tooltip>
					</div>
				</div>
			</template>
			<!--  -->
			<el-table :data="tableData" stripe :default-sort="{ prop: 'date', order: 'descending' }" border
				style="width: 100%;height: 276px;margin-top: -1px;" class="my">
				<el-table-column width="40px" prop="id" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_order" label="出库单号" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_status" label="出库状态" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_status?.color" :title="scope.row.outbound_status.label"
							style="border: 0;" round :color="scope.row.outbound_status.color" effect="dark">
							{{scope.row.outbound_status.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_type" label="出库类型" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_type?.color" :title="scope.row.outbound_type.label"
							style="border: 0;" round :color="scope.row.outbound_type.color" effect="dark">
							{{scope.row.outbound_type.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_products" label="出库产品" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_products?.color" class="my"
							:title="scope.row.outbound_products.label" style="border: 0;max-width: 100%;"
							:style="{color:scope.row.outbound_products.f_color}" round
							:color="scope.row.outbound_products.color" effect="dark">
							{{scope.row.outbound_products.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_count" label="出库数量" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_date" label="出库日期" :sortable="false"></el-table-column>
				<el-table-column prop="applicant" label="申请人" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.applicant?.color" class="my" :title="scope.row.applicant.username"
							style="border: 0;max-width: 100%;padding-left: 0;"
							:style="{color:scope.row.applicant.f_color}" :color="scope.row.applicant.color" round
							effect="dark">
							<el-avatar :size="20" :src="scope.row.applicant.image"
								style="margin-right: 6px;min-width: 20px;" />
							{{scope.row.applicant.username}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="approver" label="审批人" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.approver?.color" class="my" :title="scope.row.approver.username"
							style="border: 0;max-width: 100%;padding-left: 0;"
							:style="{color:scope.row.approver.f_color}" :color="scope.row.approver.color" round
							effect="dark">
							<el-avatar :size="20" :src="scope.row.approver.image"
								style="margin-right: 6px;min-width: 20px;" />
							{{scope.row.approver.username}}
						</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<!--  -->
			<el-pagination class="my" style="height: 40px;" layout="prev, pager, next" :pager-count="6" :page-size="7"
				:total="140">
			</el-pagination>
		</el-card>
		<!--  -->
		<!--  -->
		<div style="height: 20px;"></div>
		<el-card shadow="hover" style="height: auto;" class="my">
			<template #header>
				<div class="flex-space-between">
					<div class="left">
						<el-text size="large">
							入库流水
						</el-text>
					</div>
					<div class="right">
						<el-tooltip placement="top" effect="light" content="更多">
							<div class="my-a">
								<el-icon color="#676967">
									<MoreFilled />
								</el-icon>
							</div>
						</el-tooltip>
					</div>
				</div>
			</template>
			<!--  -->
			<el-table :data="tableData" stripe :default-sort="{ prop: 'date', order: 'descending' }" border
				style="width: 100%;height: 276px;margin-top: -1px;" class="my">
				<el-table-column width="40px" prop="id" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_order" label="入库单号" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_status" label="入库状态" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_status?.color" :title="scope.row.outbound_status.label"
							style="border: 0;" round :color="scope.row.outbound_status.color" effect="dark">
							{{scope.row.outbound_status.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_type" label="入库类型" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_type?.color" :title="scope.row.outbound_type.label"
							style="border: 0;" round :color="scope.row.outbound_type.color" effect="dark">
							{{scope.row.outbound_type.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_products" label="入库产品" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_products?.color" class="my"
							:title="scope.row.outbound_products.label" style="border: 0;max-width: 100%;"
							:style="{color:scope.row.outbound_products.f_color}" round
							:color="scope.row.outbound_products.color" effect="dark">
							{{scope.row.outbound_products.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_count" label="入库数量" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_date" label="入库日期" :sortable="false"></el-table-column>
				<el-table-column prop="applicant" label="申请人" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.applicant?.color" class="my" :title="scope.row.applicant.username"
							style="border: 0;max-width: 100%;padding-left: 0;"
							:style="{color:scope.row.applicant.f_color}" :color="scope.row.applicant.color" round
							effect="dark">
							<el-avatar :size="20" :src="scope.row.applicant.image"
								style="margin-right: 6px;min-width: 20px;" />
							{{scope.row.applicant.username}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="approver" label="审批人" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.approver?.color" class="my" :title="scope.row.approver.username"
							style="border: 0;max-width: 100%;padding-left: 0;"
							:style="{color:scope.row.approver.f_color}" :color="scope.row.approver.color" round
							effect="dark">
							<el-avatar :size="20" :src="scope.row.approver.image"
								style="margin-right: 6px;min-width: 20px;" />
							{{scope.row.approver.username}}
						</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<!--  -->
			<el-pagination class="my" style="height: 40px;" layout="prev, pager, next" :pager-count="6" :page-size="7"
				:total="140">
			</el-pagination>
		</el-card>
		<!--  -->
		<!--  -->
		<div style="height: 20px;"></div>
		<el-card shadow="hover" style="height: auto;" class="my">
			<template #header>
				<div class="flex-space-between">
					<div class="left">
						<el-text size="large">
							盘点记录
						</el-text>
					</div>
					<div class="right">
						<el-tooltip placement="top" effect="light" content="启用查看原始数据">
							<div class="my-a">
								<el-icon color="#676967">
									<Position />
								</el-icon>
							</div>
						</el-tooltip>
						<el-tooltip placement="top" effect="light" content="更多">
							<div class="my-a">
								<el-icon color="#676967">
									<MoreFilled />
								</el-icon>
							</div>
						</el-tooltip>
					</div>
				</div>
			</template>
			<!--  -->
			<el-table :data="tableData" stripe :default-sort="{ prop: 'date', order: 'descending' }"
				style="width: 100%;height: 276px;" class="my">
				<el-table-column prop="outbound_order" label="入库单号" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_status" label="入库状态" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_status?.color" :title="scope.row.outbound_status.label"
							style="border: 0;" round :color="scope.row.outbound_status.color" effect="dark">
							{{scope.row.outbound_status.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_type" label="入库类型" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_type?.color" :title="scope.row.outbound_type.label"
							style="border: 0;" round :color="scope.row.outbound_type.color" effect="dark">
							{{scope.row.outbound_type.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_products" label="入库产品" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_products?.color" class="my"
							:title="scope.row.outbound_products.label" style="border: 0;max-width: 100%;"
							:style="{color:scope.row.outbound_products.f_color}" round
							:color="scope.row.outbound_products.color" effect="dark">
							{{scope.row.outbound_products.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_count" label="入库数量" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_date" label="入库日期" :sortable="false"></el-table-column>
				<el-table-column prop="applicant" label="申请人" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.applicant?.color" class="my" :title="scope.row.applicant.username"
							style="border: 0;max-width: 100%;padding-left: 0;"
							:style="{color:scope.row.applicant.f_color}" :color="scope.row.applicant.color" round
							effect="dark">
							<el-avatar :size="20" :src="scope.row.applicant.image"
								style="margin-right: 6px;min-width: 20px;" />
							{{scope.row.applicant.username}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="approver" label="审批人" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.approver?.color" class="my" :title="scope.row.approver.username"
							style="border: 0;max-width: 100%;padding-left: 0;"
							:style="{color:scope.row.approver.f_color}" :color="scope.row.approver.color" round
							effect="dark">
							<el-avatar :size="20" :src="scope.row.approver.image"
								style="margin-right: 6px;min-width: 20px;" />
							{{scope.row.approver.username}}
						</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<!--  -->
		</el-card>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row>
			<el-col :span="24">
				<el-card class="card-image" :style="`background-image: url('/images/仓库简报.png');`" shadow="hover">
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row>
			<el-col :span="24">
				<el-card style="height: 44px;" shadow="hover" class="my1 flex-align-center">
					<el-button text :disabled="dateStartIndex<=0" @click="dateStartAll('start')">
						<el-icon>
							<ArrowLeft />
						</el-icon>
					</el-button>
					<!--  -->
					<el-select class="my1" ref="selectRef" v-model="selectValue" @change="selectChange" suffix-icon=""
						placeholder="月份">
						<template #header>
							<div class="flex-space-between">
								<el-text type="info" style="margin-left: 12px;">月份</el-text>
								<el-button v-show="selectValue" type="danger" text @click="selectEr">清空</el-button>
							</div>
						</template>
						<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<!--  -->
					<el-button text :disabled="dateStartIndex===-1||dateStartIndex>=cities.length - 1"
						@click="dateStartAll('end')">
						<el-icon>
							<ArrowRight />
						</el-icon>
					</el-button>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-row :gutter="20">
			<el-col :span="12">
				<!--  -->
				<el-row :gutter="20">
					<el-col :span="12">
						<el-card style="height: 174px;" shadow="hover">
							<div class="top">
								<el-text type="info">
									在库库存总量
								</el-text>
							</div>
							<div class="body">
								<el-tooltip placement="top">
									<template #content>
										3660
									</template>
									<el-text>
										3660
									</el-text>
								</el-tooltip>
							</div>
						</el-card>
					</el-col>
					<el-col :span="12">
						<el-card style="height: 174px;" shadow="hover">
							<div class="top">
								<el-text type="info">
									在库产品种类数
								</el-text>
							</div>
							<div class="body">
								<el-tooltip placement="top">
									<template #content>
										6
									</template>
									<el-text>
										6
									</el-text>
								</el-tooltip>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<!--  -->
				<div style="height: 20px;"></div>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-card style="height: 104px;" shadow="hover">
							<div class="top">
								<el-text type="info">
									本月出库单数
								</el-text>
							</div>
							<div class="body">
								<el-tooltip placement="top">
									<template #content>
										0
									</template>
									<el-text>
										0
									</el-text>
								</el-tooltip>
							</div>
						</el-card>
					</el-col>
					<el-col :span="12">
						<el-card style="height: 104px;" shadow="hover">
							<div class="top">
								<el-text type="info">
									本月出库总量
								</el-text>
							</div>
							<div class="body">
								<el-tooltip placement="top">
									<template #content>
										0
									</template>
									<el-text>
										0
									</el-text>
								</el-tooltip>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<!--  -->
				<div style="height: 20px;"></div>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-card style="height: 104px;" shadow="hover">
							<div class="top">
								<el-text type="info">
									本月入库单数
								</el-text>
							</div>
							<div class="body">
								<el-tooltip placement="top">
									<template #content>
										2
									</template>
									<el-text>
										2
									</el-text>
								</el-tooltip>
							</div>
						</el-card>
					</el-col>
					<el-col :span="12">
						<el-card style="height: 104px;" shadow="hover">
							<div class="top">
								<el-text type="info">
									本月入库总量
								</el-text>
							</div>
							<div class="body">
								<el-tooltip placement="top">
									<template #content>
										1444
									</template>
									<el-text>
										1444
									</el-text>
								</el-tooltip>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="12">
				<el-card style="height: 424px;" shadow="hover" class="my">
					<template #header>
						<div class="flex-space-between">
							<div class="left">
								<el-text style="color: #303133;font-size: 16px;">
									在库库存量排行
								</el-text>
							</div>
							<div class="right">
								<el-tooltip placement="top" effect="light" content="启用查看原始数据">
									<div class="my-a">
										<el-icon color="#676967">
											<Position />
										</el-icon>
									</div>
								</el-tooltip>
								<el-tooltip placement="top" effect="light" content="更多">
									<div class="my-a">
										<el-icon color="#676967">
											<MoreFilled />
										</el-icon>
									</div>
								</el-tooltip>
							</div>
						</div>
					</template>
					<!--  -->
					<div ref="echart1" style="height: 376px;"></div>
				</el-card>
			</el-col>
		</el-row>
		<!--  -->
		<div style="height: 20px;"></div>
		<el-card shadow="hover" style="height: auto;" class="my">
			<template #header>
				<div class="flex-space-between">
					<div class="left">
						<el-text size="large">
							库存预警
						</el-text>
					</div>
					<div class="right">
						<el-tooltip placement="top" effect="light" content="启用查看原始数据">
							<div class="my-a">
								<el-icon color="#676967">
									<Position />
								</el-icon>
							</div>
						</el-tooltip>
						<el-tooltip placement="top" effect="light" content="更多">
							<div class="my-a">
								<el-icon color="#676967">
									<MoreFilled />
								</el-icon>
							</div>
						</el-tooltip>
					</div>
				</div>
			</template>
			<!--  -->
			<el-table :data="tableData" stripe :default-sort="{ prop: 'date', order: 'descending' }"
				style="width: 100%;height: 276px;" class="my">
				<el-table-column prop="outbound_order" label="入库单号" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_status" label="入库状态" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_status?.color" :title="scope.row.outbound_status.label"
							style="border: 0;" round :color="scope.row.outbound_status.color" effect="dark">
							{{scope.row.outbound_status.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_type" label="入库类型" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_type?.color" :title="scope.row.outbound_type.label"
							style="border: 0;" round :color="scope.row.outbound_type.color" effect="dark">
							{{scope.row.outbound_type.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_products" label="入库产品" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_products?.color" class="my"
							:title="scope.row.outbound_products.label" style="border: 0;max-width: 100%;"
							:style="{color:scope.row.outbound_products.f_color}" round
							:color="scope.row.outbound_products.color" effect="dark">
							{{scope.row.outbound_products.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_count" label="入库数量" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_date" label="入库日期" :sortable="false"></el-table-column>
				<el-table-column prop="applicant" label="申请人" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.applicant?.color" class="my" :title="scope.row.applicant.username"
							style="border: 0;max-width: 100%;padding-left: 0;"
							:style="{color:scope.row.applicant.f_color}" :color="scope.row.applicant.color" round
							effect="dark">
							<el-avatar :size="20" :src="scope.row.applicant.image"
								style="margin-right: 6px;min-width: 20px;" />
							{{scope.row.applicant.username}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="approver" label="审批人" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.approver?.color" class="my" :title="scope.row.approver.username"
							style="border: 0;max-width: 100%;padding-left: 0;"
							:style="{color:scope.row.approver.f_color}" :color="scope.row.approver.color" round
							effect="dark">
							<el-avatar :size="20" :src="scope.row.approver.image"
								style="margin-right: 6px;min-width: 20px;" />
							{{scope.row.approver.username}}
						</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<!--  -->
		</el-card>
		<!--  -->
		<add-storage-single ref="dialogStorageRef"></add-storage-single>
		<add-outboundshipments-single ref="dialogOutboundshipmentsRef"></add-outboundshipments-single>
		<add-products ref="dialogProducts"></add-products>
		<inventory-inventory ref="dialogInventory"></inventory-inventory>
	</div>
</template>

<script setup lang="ts">
	import { onMounted, ref, } from 'vue';
	import { Position, Right, Back, CirclePlusFilled, Histogram, MoreFilled, ArrowDown, Tickets, ArrowLeft, ArrowRight, HelpFilled, TrendCharts, } from '@element-plus/icons-vue';
	import List from '../../components/list/list.vue';
	import Tab from '../../components/tab/tab.vue';
	import AddStorageSingle from './workbench-child/add-storage-single.vue';
	import addOutboundshipmentsSingle from './workbench-child/add-outboundshipments-single.vue';
	import addProducts from './workbench-child/add-products.vue';
	import inventoryInventory from './workbench-child/inventory-inventory.vue';
	import { VueDraggable } from 'vue-draggable-plus';
	import { getAllDatesInRange } from '../../utils/date';
	import { findIndexByLabel } from '../../utils/index';
	import * as echarts from 'echarts';
	import { useMaving } from '../../utils/mixins';
	onMounted(() => {
		selectInit();
		initEchart();
	})
	//拖拽
	const { mavingIndex, onStart, onEnd } = useMaving();
	const dialogStorageRef = ref(null);
	const dialogOutboundshipmentsRef = ref(null);
	const dialogProducts = ref(null);
	const dialogInventory = ref(null);
	const openDialog = (item : { id : number | string }) => {
		if (item.id === 1) {
			dialogStorageRef.value.openDialog();
			return;
		}
		if (item.id === 2) {
			dialogOutboundshipmentsRef.value.openDialog();
			return;
		}
		if (item.id === 3) {
			dialogProducts.value.openDialog();
			return;
		}
		if (item.id === 4) {
			dialogInventory.value.openDialog();
			return;
		}
	};

	const checked1 = ref(false);
	const shortcutList = ref([{
		id: 1,
		icon: Right,
		text: '新建入库单' //
	}, {
		id: 2,
		icon: Back,
		text: '新建出库单' //
	}, {
		id: 3,
		icon: CirclePlusFilled,
		text: '新建产品'//
	}, {
		id: 4,
		icon: Histogram,
		text: '库存盘点'//
	}]);
	const todosList = ref([{
		title: '待审批发货申请',
		bage: 0,
		color: '#d23ce6'
	}, {
		title: '待审批采购到货',
		bage: 4,
		color: '#44c1e3'
	}, {
		title: '待审批退货入库',
		bage: 0,
		color: '#ebebeb',
		textColor: '#3c4e63'
	}, {
		title: '待审批生产入库',
		bage: 0,
		color: '#ebebeb',
		textColor: '#3c4e63'
	}, {
		title: '待审批其他出库',
		bage: 3,
		color: '#82b51b'
	}, {
		title: '待审批其他入库',
		bage: 2,
		color: '#fa9e00'
	}]);
	//
	const tabList = ref([{
		title: '全部'
	}, {
		title: '待执行'
	}, {
		title: '已完成'
	}]);
	const menuList = ref([{
		text: '全部流程',
	}, {
		icon: HelpFilled,
		text: '采购审批',
	}, {
		icon: TrendCharts,
		text: '订单审批',
	}, {
		icon: TrendCharts,
		text: '发货审批',
	}, {
		icon: TrendCharts,
		text: '采购到货审批',
	}, {
		icon: TrendCharts,
		text: '收款审批',
	},]);
	//
	const reviewedList = ref([{
		id: 1,
		image: 'h',
		title: 'HB11073493的订单审批',
		time: '耗时1.3小时',
		sub: 'DD24060001_94,600.00元_审批中',
		user: '雄鑫',
		node: '主管审核',
		isnode: '待执行',
	}, {
		id: 2,
		image: 'h',
		title: 'HB11073493的订单审批',
		time: '耗时3.5小时',
		sub: 'DD24060001_94,600.00元_审批中',
		user: '雄鑫',
		node: '主管审核',
		isnode: '待执行',
	}, {
		id: 3,
		image: 'h',
		title: 'HB11073493的采购到货审批',
		time: '耗时6秒',
		sub: '预计2024-06-05到货',
		user: '叽叽叽_CG24060001',
		node: '库管审批',
		isnode: '确认入库',
	}, {
		id: 4,
		image: 'h',
		title: 'HB11073493的采购审批',
		time: '耗时9秒',
		sub: 'CG24060001_ 1666500元_叽叽叽',
		user: '雄鑫',
		node: '采购主管审批',
		isnode: '同意采购',
	}]);
	//
	const tableData = [{
		id: 1,
		outbound_order: '',
		outbound_status: '',
		outbound_type: '',
		outbound_products: {
			label: '松木蛋卷桌大号1.2m｜在库543件',
			value: 2,
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		outbound_count: 1,
		outbound_date: '',
		applicant: '',
		approver: '',
	}, {
		id: 2,
		outbound_order: '',
		outbound_status: '',
		outbound_type: '',
		outbound_products: {
			label: '克米特椅大号｜在库681件',
			value: 2,
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		outbound_count: 0,
		outbound_date: '',
		applicant: '',
		approver: '',
	}, {
		id: 3,
		outbound_order: 'CK23030001',
		outbound_status: {
			label: '已出库',
			value: 1,
			color: '#2fba2f'
		},
		outbound_type: {
			label: '其他出库',
			value: 2,
			color: '#1fcccc'
		},
		outbound_products: {
			label: '松木蛋卷桌大号1.2m｜在库543件',
			value: 2,
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		outbound_count: 35,
		outbound_date: '2023-03-24',
		applicant: {
			image: '/images/lsc.jpg',
			username: '李书城',
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		approver: {
			image: '/images/lsc.jpg',
			username: '李书城',
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
	}, {
		id: 4,
		outbound_order: 'CK23040001',
		outbound_status: {
			label: '已出库',
			value: 1,
			color: '#2fba2f'
		},
		outbound_type: {
			label: '其他出库',
			value: 2,
			color: '#1fcccc'
		},
		outbound_products: {
			label: '松木蛋卷桌大号1.2m｜在库543件',
			value: 2,
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		outbound_count: 2,
		outbound_date: '2023-04-28',
		applicant: {
			image: '/images/xhy.jpg',
			username: '徐宏远（曦扬）',
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		approver: {
			image: '/images/xhy.jpg',
			username: '徐宏远（曦扬）',
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
	},];
	const echartOption1 = {
		title: {
			subtext: '商品名称',
			left: '45%',
			top: 20
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		dataset: {
			source: [
				[522.8, 'BELL贝尔温3*5米|在库734件', 'BELL贝尔温3*5米|在库734件'],
				[456.8, 'naturehike挪客3*4米|在库889件', 'naturehike挪客3*4米|在库889件'],
				[212.4, '克米特椅中号│在库692件', '克米特椅中号│在库692件'],
				[142.1, '克米特椅大号│在库681件', '克米特椅大号│在库681件'],
				[140.3, '松木蛋卷桌大号1.2m|在库543件', '松木蛋卷桌大号1.2m|在库543件'],
				[312.8, '铝合金蛋卷桌大号1.2m |在库508盒', '铝合金蛋卷桌大号1.2m |在库508盒']
			]
		},
		grid: { containLabel: true },
		xAxis: {},
		legend: {
			bottom: 0,
			data: ['订单总额']
		},
		yAxis: { type: 'category' },
		series: [
			{
				name: '订单总额',
				type: 'bar',
				color: '#a1a5f7',
				areaStyle: {
					color: '#ebf4ef',
					borderRadius: 6,
				},
				label: {
					show: true,
					position: 'inside',
					color: '#fff'
				},
				encode: {
					// Map the "amount" column to X axis.
					x: 'amount',
					// Map the "product" column to Y axis
					y: 'product'
				}
			}
		]
	};
	const calendar = ref();

	const selectValue = ref('');
	const selectRef = ref(null);
	const cities = ref([]);
	const dateStartIndex = ref(-1);
	const echart1 = ref(null);
	const initEchart = () => {
		// 基于准备好的dom，初始化echarts实例
		var myChart1 = echarts.init(echart1.value);
		// 绘制图表
		myChart1.setOption(echartOption1);
	}
	const selectDate = (val : any) => {
		if (!calendar.value) return;
		calendar.value.selectDate(val);
	}
	const selectInit = () => {
		const dates = getAllDatesInRange('2023-03', '2024-06');
		console.log('dates--->>', dates);
		dates.forEach((date : string) => {
			cities.value.push({
				value: date,
				label: date,
			});
		});
	}
	const dateStartAll = (type : string) => {
		console.log(type);
		if (type === 'start') {
			dateStartIndex.value--;
		}
		if (type === 'end') {
			dateStartIndex.value++;
		}
		//
		const item = cities.value[dateStartIndex.value];
		console.log('item--->', item);
		selectValue.value = item;
	}
	const selectEr = () => {
		selectValue.value = '';
		selectRef.value.blur();
		dateStartIndex.value = -1;
	}

	const selectChange = (val : any) => {
		console.log('selectChange--->', val);
		const index = findIndexByLabel(cities.value, val, 'label');
		console.log('index--->', index);
		dateStartIndex.value = index;
		selectValue.value = val;
	}
</script>

<style>
	@import '../../assets/css/index.css';

	/* 下拉框 */
	/* start */

	.my1.el-card .el-card__body {
		flex: 1 1;
		display: flex;
		align-items: center;
		padding: 0 6px;
	}

	.my1.el-select .el-select__wrapper {
		box-shadow: none;
	}

	.my1.el-select .el-select__wrapper.is-focused {
		box-shadow: none;
	}

	.my1.el-select .el-select__wrapper:hover {
		box-shadow: none;
	}

	.my1.el-select .el-select__placeholder {
		text-align: center;
	}

	/* end */
	/*  */
</style>

<style scoped lang="scss">
	@import '../../assets/css/index.scss';
</style>